<template>
  <a-card title="表单三">
    <a-alert message="数据不能为空" type="error" v-show="showError" show-icon />
    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
          <div>
            <a-input
              v-if="editableData[record.key]"
              v-model:value="editableData[record.key][column.dataIndex]"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
            <span v-if="editableData[record.key]">
              <a-typography-link
                @click="save(record.key)"
                style="margin-right: 10px"
                >保存</a-typography-link
              >
              <a-popconfirm
                title="确定取消?"
                cancelText="取消"
                okText="确认"
                @confirm="cancel(record.key)"
              >
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a @click="edit(record.key)" style="margin-right: 10px">编辑</a>
              <a-popconfirm
                title="确定删除?"
                cancelText="取消"
                okText="确认"
                @confirm="del(record)"
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </template>
    </a-table>
    <a-button type="dashed" style="width: 100%; margin-top: 10px" @click="add"
      >新增数据</a-button
    >
  </a-card>
</template>

<script lang="ts" setup>
import { cloneDeep } from "lodash-es";
import { reactive, ref, watch } from "vue";
import type { UnwrapRef } from "vue";
const showError = ref(false);

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    width: "25%",
  },
  {
    title: "年龄",
    dataIndex: "age",
    width: "15%",
  },
  {
    title: "地址",
    dataIndex: "address",
    width: "40%",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];
interface DataItem {
  key: string;
  name: string;
  age: number;
  address: string;
}
const dataSource = ref<DataItem[]>([]);
for (let i = 0; i < 3; i++) {
  dataSource.value.push({
    key: i.toString(),
    name: `name ${i}`,
    age: 32,
    address: `address. ${i}`,
  });
}

watch(dataSource.value, (newValue) => {
  if (dataSource.value.length) {
    showError.value = false;
  } else {
    showError.value = true;
  }
});
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});
const edit = (key: string) => {
  editableData[key] = cloneDeep(
    dataSource.value.filter((item) => key === item.key)[0]
  );
};
const save = (key: string) => {
  Object.assign(
    dataSource.value.filter((item) => key === item.key)[0],
    editableData[key]
  );
  delete editableData[key];
};
const cancel = (key: string) => {
  delete editableData[key];
};
const del = (data: DataItem) => {
  const index = dataSource.value.indexOf(data);
  if (index != -1) {
    dataSource.value.splice(index, 1);
  }
};
const add = () => {
  const num = Math.floor(Math.random() * 100);
  dataSource.value.push({
    key: num.toString(),
    name: `name ${num}`,
    age: num,
    address: `address. ${num}`,
  });
};
const onSubmit = () => {
  return new Promise((resolve, reject) => {
    if (!dataSource.value.length) {
      reject();
      return;
    }
    resolve(dataSource.value);
  });
};
const restForm = () => {
  dataSource.value = []
}
defineExpose({
  onSubmit,
  restForm
});
</script>

<style scoped lang="less"></style>
